<template>
    <div id="home">
        <v-header></v-header>
        <div class="fixedHeight">
            <slider :banners="banners" v-if="banners.length>0"></slider>
        </div>
        <icons></icons>
        <recommend :recommendList="recommendList"></recommend>
        <week :weekList="weekList"></week>

        <p class="no-more">没有更多</p>
    </div>
</template>

<script>
    let that
    import Icons from "./icons"
    import VHeader from "./v-header"
    import Slider from "../core/slider"
    import Recommend from "./recommend"
    import Week from "./week"
    import axios from "axios"

    export default {
        name:'home',
        components: {
            VHeader,
            Slider,
            Icons,
            Recommend,
            Week
        },
        data() {
            return {
                banners: [],
                recommendList: [],
                weekList: [],
                lastCity:''   //存city，回首页时对比有没选city，如state.city一样则没有选择则缓存activated勾子里不执行操作

            }
        },
        methods: {

            getAjax() {
                this.banners= this.recommendList = this.weekList = []

                that = this;
                axios('/api/home.json?city='+this.$store.state.city).then((req) => {
                    req.data.bannerAjax.forEach((item) => {
                        that.banners.push(item)
                    })
                    that.recommendList = req.data.recommend
                    that.weekList = req.data.week
                })
            }
        },
        mounted() {
            //第一次点开会渲染会触发这个勾子，将vuex城市存起来后面对比。后面由于缓存不会再触发这勾子
            this.lastCity=this.$store.state.city
            this.getAjax()
        },
        activated(){
            if(this.lastCity!==this.$store.state.city){
                this.getAjax()
                this.lastCity=this.$store.state.city
            }

        }
    }
</script>

<style lang="scss" scoped>

    #home {
        ::v-deep .swiper-pagination-bullet {
            background-color: #fff;
        }
        ::v-deep .week {
            margin-top: .2rem;
        }
        .no-more {
            padding: .3rem 0;
            text-align: center;
            color:#d3d3d3;
        }
        .fixedHeight{
            overflow: hidden;
            height: 0;
            width: 100%;
            padding-bottom: 50%;
        }
    }
</style>
